<template>
  <div class="template-content">
    <SearchHeader v-model="queryParam.where.keyword" :canAdd="canModify" @handleSearch="getData" @handleAdd="add" @handleInit="queryParam.init">
      <Row :gutter="4">
<!--        <Col span="2"><Button type="success" icon="ios-add" @click="add">新增</Button></Col>-->
        <Col span="6"><Input :placeholder="$t('permission')" v-model="queryParam.where.code"></Input> </Col>
        <Col span="6"><Input :placeholder="$t('name')" v-model="queryParam.where.name"></Input> </Col>
<!--        <Col span="1"><Button type="primary" icon="ios-search" @click="getData">查询</Button></Col>-->
      </Row>
    </SearchHeader>

    <Card>
      <Table :loading="loading" stripe  :data="tableData" :columns="columns">
        <template slot-scope="{ row, index }" slot="action">
<!--          <Button type="default"  Title="编辑" icon="md-create" v-if="row.loginName !='admin'" style="margin-right: 5px" ></Button>-->
          <Button type="default" :Title="$t('browse')" icon="md-list-box" style="margin-right: 5px" @click="view(row)"></Button>
          <Button type="default"  :disabled="!canModify" :title="$t('edit')" icon="md-create" style="margin-right: 5px" @click="edit(row)"></Button>
          <Button type="default"  :disabled="!canModify" :title="$t('delete')" icon="md-trash"  @click="remove(row)"></Button>
          <Button type="default"  :disabled="!canModify" :title="$t('permission')" icon="md-contacts" @click="roleAuth(row)"></Button>
<!--          <Button type="primary" size="small"  @click="remove(row)">权限</Button>-->
        </template>
        <template slot-scope="{ row, index }" slot="roleLevel">
          <span v-if="row.roleLevel==1">{{$t('permission_level_1')}}</span>
          <span v-if="row.roleLevel==2">{{$t('permission_level_2')}}</span>
          <span v-if="row.roleLevel==3">{{$t('permission_level_3')}}</span>
          <span v-if="row.roleLevel==4">{{$t('permission_level_4')}}</span>
        </template>
      </Table>
      <TopnavPage v-model="queryParam.page" @changePage="getData"></TopnavPage>
    </Card>
    <!-- 数据编辑  -->
<!--    <Modal v-model="addModal"  :loading="modalLoading" title="新增/编辑数据" width="600px" @on-ok="modelOk"  @on-cancel="modelCancel">

    </Modal>-->
    <RoleEdit ref="roleEdit"></RoleEdit>
    <RoleAuthorization ref="roleAuthorization"></RoleAuthorization>
  </div>
</template>
<script>
//import {queryPage,add,update,remove} from '@/api/role';
import {queryByRole} from '@/api/RolePermission';
import TopnavPage from "_c/topnav/TopnavPage";
import SearchHeader from "@/view/Common/SearchHeader";
import RoleEdit from "@/view/User/RoleEdit"
import Role from '@/api/role';
import {apiResult, clone} from '@/libs/util'
import RoleAuthorization from "@/view/User/RoleAuthorization";
import AuthCheck from '@/api/AuthCheck'
export default {
  name: 'role',
  components: {TopnavPage,SearchHeader,RoleEdit,RoleAuthorization},
  computed:{
    columns(){
      return [{title: this.$t('operate'), key: 'action', width: 200, slot:'action'},
        {title: this.$t('role'), key: 'code', sortable: true, width: 175},
        {title: this.$t('name'), key: 'name', sortable: true, width: 200},
        {title: this.$t('data_permission'), key: 'roleLevel', sortable: true, width: 300,slot:'roleLevel'}
        /* {title: this.$t('function_permission'), key: 'pmNames', sortable: true, width: 200}]*/
        ]

    }

  },
  data(){
    return{
      roleApi: new Role(),
      loading: false,
      addModal: false,
      modalLoading: true,
      canModify: false,
      tableData:[],
/*      roleLevelList:[
        {value: 1, label: '普通人员'},
        {value: 2, label: '单位管理'},
        {value: 3, label: '监督管理'},
        {value: 4, label: '系统管理员'}
      ],*/
      queryParam: {
        page: {
          desc: ['create_time'],
          pages: 0,
          size: 15,
          total: 0,
          current: 1,
        },
        where: {keyword:null,code: null, name: null},
        init:()=>{
          this.queryParam.where.keyword=null;
          this.queryParam.where.code=null;
          this.queryParam.where.name=null;
        }
      },

      rowData: {
        id: null,
        code: null,
        name: null,
        roleLevel: 1,
        permissions:[]
      },

    }
  },
  methods:{
    getData() {
      /** 生成查询条件 */
      this.roleApi.queryPage(JSON.stringify(this.queryParam)).then(res => {
        this.tableData = [];
        apiResult(res.data,false,result=>{
          this.queryParam.page.total = result.data.total;
          this.tableData = result.data.records;
        });
      })
    },
    add() {
      let row = {
        id: null,
        code: null,
        name: null,
        roleLevel: 1,
        permissions: [],
      }
      this.$refs.roleEdit.openDialog("ADD", row, this.getData);
    },
    edit(row) {
      this.$refs.roleEdit.openDialog("EDIT", clone(row), this.getData);
    },
    view(row) {
      this.$refs.roleEdit.openDialog("VIEW", clone(row), this.getData);
    },

    remove(row){
      this.$Modal.confirm({
        title: this.$t('delete_confirm'),
        content: this.$t('delete_make_sure'),
        onOk: () => {
          this.roleApi.remove(JSON.stringify({id:row.id})).then(res=>{
            apiResult(res.data,true,result=>{
              this.getData();
            });
          });
        },
        onCancel: () => {
        }
      });
    },
    roleAuth(row){
      this.$refs.roleAuthorization.openDialog(row.id,"EDIT");
    }
  },
  mounted() {
    this.canModify = new AuthCheck().userRoleEdit();
    this.getData();
  }
}
</script>
<style lang="less">
@import ".././template";
</style>
